<template>
  <div class="main-containers">
    <div class="top-container"
         :style='{"boxShadow":"0 1px 6px rgba(64, 158, 255, .3)","padding":"0 20px","alignItems":"center","display":"flex","justifyContent":"space-between","overflow":"hidden","top":"0","left":"0","background":"#ffffff","width":"100%","position":"fixed","height":"64px","zIndex":"1002"}'>
      <img v-if='true' :style='{"width":"0","objectFit":"cover","borderRadius":"100%","display":"block","height":"0"}'
           src='http://codegen.caihongy.cn/20201114/7856ba26477849ea828f481fa2773a95.jpg'>
      <div v-if="true" :style='{"color":"rgba(0, 0, 0, 1)","fontSize":"24px"}'>基于springboot的酒店管理系统</div>
      <div>
        <div v-if="false" :style='{"color":"#666","fontSize":"14px","display":"inline-block"}'>0753-1234567</div>
        <div v-if="Token" :style='{"color":"#666","fontSize":"14px","display":"inline-block"}'>{{ username }}</div>
        <el-button v-if="!Token" @click="toLogin()"
                   :style='{"padding":"0 12px","margin":"0 0 0 10px","color":"#f4f4f5","borderRadius":"2px","background":"#666","display":"inline-block","fontSize":"14px","lineHeight":"32px","height":"32px"}'>
          登录/注册
        </el-button>
        <el-button v-if="Token" @click="logout"
                   :style='{"padding":"0 12px","margin":"0 0 0 10px","color":"#666","borderRadius":"2px","background":"#f4f4f5","display":"inline-block","fontSize":"14px","lineHeight":"32px","height":"32px"}'>
          退出
        </el-button>
      </div>
    </div>


    <div class="body-containers"
         :style='"horizontal" == "vertical" ? {"minHeight":"100vh","padding":"64px 0 0","margin":"0 0 0 210px","position":"relative","background":"rgba(64, 158, 255, .3)","display":"block"} : {"minHeight":"100vh","padding":"64px 0 0","margin":"0","position":"relative","background":"#fff"}'>
      <div class="menu-preview"
           :style='{"padding":"0 20px","borderColor":"#efefef","background":"rgba(0, 0, 0, 1)","borderWidth":"0 0 0px 0","display":"flex","width":"100%","borderStyle":"solid","justifyContent":"center","height":"auto"}'>
        <el-menu class="el-menu-horizontal-demo"
                 :style='{"border":0,"padding":"0","listStyle":"none","margin":"0","position":"relative","background":"rgba(0, 0, 0, 1)"}'
                 :default-active="activeIndex" :unique-opened="true" mode="horizontal" :router="true"
                 @select="handleSelect">
          <el-image v-if="false"
                    :style='{"width":"44px","margin":"8px 10px 8px 0","objectFit":"cover","borderRadius":"100%","float":"left","height":"44px"}'
                    src="http://codegen.caihongy.cn/20201114/7856ba26477849ea828f481fa2773a95.jpg"
                    fit="cover"></el-image>
          <el-menu-item v-for="(menu, index) in menuList" :index="index + ''" :key="index" :route="menu.url">
            <i v-if="false"
               :style='{"padding":"0 10px","margin":"0","color":"inherit","width":"14px","lineHeight":"60px","fontSize":"14px","height":"60px"}'
               :class="iconArr[index]"></i>
            <span :style='{"padding":"0 10px","lineHeight":"60px","fontSize":"18px","color":"inherit","height":"60px"}'>{{ menu.name }}</span>
          </el-menu-item>
          <el-menu-item :index="menuList.length + 2 + ''" v-if="Token && notAdmin" @click="goMenu('/index/center')">
            <i v-if="false"
               :style='{"padding":"0 10px","margin":"0","color":"inherit","width":"14px","lineHeight":"60px","fontSize":"14px","height":"60px"}'
               class="el-icon-user"></i>
            <span :style='{"padding":"0 10px","lineHeight":"60px","fontSize":"18px","color":"inherit","height":"60px"}'>个人中心</span>
          </el-menu-item>
        </el-menu>
      </div>

      <div class="banner-preview" :style='{"width":"100%","height":"auto"}'>
        <el-carousel :style='{"width":"100%","margin":"0 auto","height":"500px"}' trigger="click"
                     indicator-position="inside" arrow="always" type="default" direction="horizontal" height="400px"
                     :autoplay="true" :interval="3000" :loop="true">
          <el-carousel-item :style='{"borderRadius":"10px","width":"100%","height":"500px"}'
                            v-for="item in carouselList" :key="item.id">
            <el-image :style='{"objectFit":"cover","width":"100%","height":"500px"}' :src="baseUrl + item.value"
                      fit="cover"></el-image>
          </el-carousel-item>
        </el-carousel>
      </div>

      <router-view></router-view>

      <div class="bottom-preview"
           :style='{"padding":"20px 0","alignItems":"center","background":"rgba(0, 0, 0, 1)","flexDirection":"column","display":"flex","width":"100%","justifyContent":"center"}'>
        <img :style='{"width":"0","objectFit":"cover","borderRadius":"100%","display":"block","height":"0"}'
             src="http://codegen.caihongy.cn/20201114/7856ba26477849ea828f481fa2773a95.jpg">
        <div :style='{"margin":"10px 0 0","fontSize":"14px","lineHeight":"28px","color":"#333"}'></div>
        <div :style='{"margin":"10px 0 0","fontSize":"14px","lineHeight":"28px","color":"#333"}'></div>
        <div :style='{"margin":"10px 0 0","fontSize":"14px","lineHeight":"28px","color":"#333"}'></div>
      </div>
    </div>

  </div>
</template>

<script>
import Vue from 'vue'

export default {
  data() {
    return {
      activeIndex: '0',
      roleMenus: [{
        "backMenu": [{
          "child": [{
            "appFrontIcon": "cuIcon-copy",
            "buttons": ["新增", "查看", "修改", "删除", "报表"],
            "menu": "用户",
            "menuJump": "列表",
            "tableName": "yonghu"
          }], "menu": "用户管理"
        }, {
          "child": [{
            "appFrontIcon": "cuIcon-album",
            "buttons": ["新增", "查看", "修改", "删除"],
            "menu": "客房类型",
            "menuJump": "列表",
            "tableName": "kefangleixing"
          }], "menu": "客房类型管理"
        }, {
          "child": [{
            "appFrontIcon": "cuIcon-full",
            "buttons": ["新增", "查看", "修改", "删除", "查看评论", "预订"],
            "menu": "酒店客房",
            "menuJump": "列表",
            "tableName": "jiudiankefang"
          }], "menu": "酒店客房管理"
        }, {
          "child": [{
            "appFrontIcon": "cuIcon-cardboard",
            "buttons": ["查看", "修改", "删除", "报表", "退订"],
            "menu": "客房预订",
            "menuJump": "列表",
            "tableName": "kefangyuding"
          }], "menu": "客房预订管理"
        }, {
          "child": [{
            "appFrontIcon": "cuIcon-pic",
            "buttons": ["查看", "修改", "删除", "审核", "支付"],
            "menu": "客房退订",
            "menuJump": "列表",
            "tableName": "kefangtuiding"
          }], "menu": "客房退订管理"
        }, {
          "child": [{
            "appFrontIcon": "cuIcon-addressbook",
            "buttons": ["新增", "查看", "修改", "删除"],
            "menu": "轮播图管理",
            "tableName": "config"
          }], "menu": "系统管理"
        }],
        "frontMenu": [{
          "child": [{
            "appFrontIcon": "cuIcon-phone",
            "buttons": ["查看", "预订"],
            "menu": "酒店客房列表",
            "menuJump": "列表",
            "tableName": "jiudiankefang"
          }], "menu": "酒店客房模块"
        }],
        "hasBackLogin": "是",
        "hasBackRegister": "否",
        "hasFrontLogin": "否",
        "hasFrontRegister": "否",
        "roleName": "管理员",
        "tableName": "users"
      }, {
        "backMenu": [{
          "child": [{
            "appFrontIcon": "cuIcon-cardboard",
            "buttons": ["查看", "删除", "退订", "支付"],
            "menu": "客房预订",
            "menuJump": "列表",
            "tableName": "kefangyuding"
          }], "menu": "客房预订管理"
        }, {
          "child": [{
            "appFrontIcon": "cuIcon-pic",
            "buttons": ["查看", "删除"],
            "menu": "客房退订",
            "menuJump": "列表",
            "tableName": "kefangtuiding"
          }], "menu": "客房退订管理"
        }],
        "frontMenu": [{
          "child": [{
            "appFrontIcon": "cuIcon-phone",
            "buttons": ["查看", "预订"],
            "menu": "酒店客房列表",
            "menuJump": "列表",
            "tableName": "jiudiankefang"
          }], "menu": "酒店客房模块"
        }],
        "hasBackLogin": "否",
        "hasBackRegister": "否",
        "hasFrontLogin": "是",
        "hasFrontRegister": "是",
        "roleName": "用户",
        "tableName": "yonghu"
      }],
      baseUrl: '',
      carouselList: [],
      menuList: [],
      form: {
        ask: '',
        userid: localStorage.getItem('userid')
      },
      Token: localStorage.getItem('Token'),
      username: localStorage.getItem('username'),
      notAdmin: localStorage.getItem('sessionTable') != '"users"',
      timer: '',
      iconArr: [
        'el-icon-star-off',
        'el-icon-goods',
        'el-icon-warning',
        'el-icon-question',
        'el-icon-info',
        'el-icon-help',
        'el-icon-picture-outline-round',
        'el-icon-camera-solid',
        'el-icon-video-camera-solid',
        'el-icon-video-camera',
        'el-icon-bell',
        'el-icon-s-cooperation',
        'el-icon-s-order',
        'el-icon-s-platform',
        'el-icon-s-operation',
        'el-icon-s-promotion',
        'el-icon-s-release',
        'el-icon-s-ticket',
        'el-icon-s-management',
        'el-icon-s-open',
        'el-icon-s-shop',
        'el-icon-s-marketing',
        'el-icon-s-flag',
        'el-icon-s-comment',
        'el-icon-s-finance',
        'el-icon-s-claim',
        'el-icon-s-opportunity',
        'el-icon-s-data',
        'el-icon-s-check'
      ],
    }
  },
  created() {
    this.baseUrl = this.$config.baseUrl;
    this.menuList = this.$config.indexNav;
    this.getCarousel();
  },
  mounted() {
    this.activeIndex = localStorage.getItem('keyPath') || '0';
  },
  watch: {
    $route(newValue) {
      let that = this
      let url = window.location.href
      let arr = url.split('#')
      for (let x in this.menuList) {
        if (newValue.path == this.menuList[x].url) {
          this.activeIndex = x
        }
      }
      this.Token = localStorage.getItem('Token')
    },
  },
  methods: {
    handleSelect(keyPath) {
      if (keyPath) {
        localStorage.setItem('keyPath', keyPath)
      }
    },
    toLogin() {
      this.$router.push('/login');
    },
    logout() {
      localStorage.clear();
      Vue.http.headers.common['Token'] = "";
      this.$router.push('/index/home');
      this.activeIndex = '0'
      localStorage.setItem('keyPath', this.activeIndex)
      this.Token = ''
      this.$forceUpdate()
      this.$message({
        message: '登出成功',
        type: 'success',
        duration: 1000,
      });
    },
    getCarousel() {
      this.$http.get('config/list', {params: {page: 1, limit: 3}}).then(res => {
        if (res.data.code == 0) {
          this.carouselList = res.data.data.list;
        }
      });
    },
    goBackend() {
      window.open(`${this.$config.baseUrl}admin/dist/index.html`, "_blank");
    },
    goMenu(path) {
      if (!localStorage.getItem('Token')) {
        this.toLogin();
      } else {
        this.$router.push(path);
      }
    },
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.menu-preview {
  .el-scrollbar {
    height: 100%;

    & /deep/ .scrollbar-wrapper {
      overflow-x: hidden;
    }
  }
}


.menu-preview .el-menu-horizontal-demo .el-menu-item {
  cursor: pointer;
  border: 0;
  padding: 0 20px;
  color: #eee;
  white-space: nowrap;
  display: flex;
  font-size: 14px;
  line-height: 70px;
  background: rgba(0, 0, 0, 1);
  align-items: center;
  position: relative;
  list-style: none;
  height: 70px;
}

.menu-preview .el-menu-horizontal-demo .el-menu-item:hover {
  cursor: pointer;
  border: 0;
  padding: 0 20px;
  color: #eee;
  white-space: nowrap;
  background: #b7b7b7;
  font-size: 14px;
  line-height: 70px;
  position: relative;
  list-style: none;
  height: 70px;
}

.menu-preview .el-menu-horizontal-demo .el-menu-item.is-active {
  cursor: pointer;
  border: 0;
  padding: 0 20px;
  color: #fff;
  white-space: nowrap;
  background: rgba(183, 183, 183, 1);
  font-size: 14px;
  line-height: 70px;
  position: relative;
  list-style: none;
  height: 70px;
}

.banner-preview {
  .el-carousel /deep/ .el-carousel__indicator button {
    width: 0;
    height: 0;
    display: none;
  }
}

.banner-preview .el-carousel /deep/ .el-carousel__container .el-carousel__arrow--left {
  width: 36px;
  font-size: 12px;
  height: 36px;
}

.banner-preview .el-carousel /deep/ .el-carousel__container .el-carousel__arrow--left:hover {
  background: red;
}

.banner-preview .el-carousel /deep/ .el-carousel__container .el-carousel__arrow--right {
  width: 36px;
  font-size: 12px;
  height: 36px;
}

.banner-preview .el-carousel /deep/ .el-carousel__container .el-carousel__arrow--right:hover {
  background: red;
}

.banner-preview .el-carousel /deep/ .el-carousel__indicators {
  padding: 0;
  margin: 0;
  z-index: 2;
  position: absolute;
  list-style: none;
}

.banner-preview .el-carousel /deep/ .el-carousel__indicators li {
  border-radius: 10px;
  padding: 0;
  margin: 0 4px;
  background: #fff;
  display: inline-block;
  width: 12px;
  opacity: 0.4;
  transition: 0.3s;
  height: 12px;
}

.banner-preview .el-carousel /deep/ .el-carousel__indicators li:hover {
  padding: 0;
  margin: 0 4px;
  background: #fff;
  display: inline-block;
  width: 24px;
  opacity: 0.7;
  height: 12px;
}

.banner-preview .el-carousel /deep/ .el-carousel__indicators li.is-active {
  padding: 0;
  margin: 0 4px;
  background: #fff;
  display: inline-block;
  width: 24px;
  opacity: 1;
  height: 12px;
}

.chat-content {
  .left-content {
    width: 100%;
    text-align: left;
  }

  .right-content {
    width: 100%;
    text-align: right;
  }
}
</style>
